Lazy loading হলো একটি প্রযুক্তি যা Angular অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করার জন্য ব্যবহৃত হয়। Lazy loading-এর মাধ্যমে Angular শুধুমাত্র প্রয়োজনীয় মডিউলগুলোকে লোড করে যখন সেগুলো ব্যবহার করা হয়। এর ফলে অ্যাপ্লিকেশনটি প্রথমবার লোড হওয়ার সময় কম সময় নেয় এবং পেজের মধ্যে unnecessary কোড লোড না হয়ে শুধু প্রয়োজনীয় কোডই লোড হয়।
Angular-এ Lazy Loading রাউটিংয়ের মাধ্যমে বিভিন্ন ফিচারের জন্য আলাদা আলাদা মডিউল তৈরি করা হয়, যেগুলো ইউজারের নেভিগেশন অনুযায়ী ডাইনামিক্যালি লোড হয়। এর ফলে অ্যাপ্লিকেশনটি দ্রুত লোড হয় এবং স্কেলেবল থাকে।
Lazy loading কনফিগার করার জন্য Angular-এ কিছু নির্দিষ্ট পদক্ষেপ অনুসরণ করতে হয়। এখানে পুরো প্রক্রিয়াটি ব্যাখ্যা করা হয়েছে:
প্রথমে আপনাকে একটি নতুন মডিউল তৈরি করতে হবে যেটি Lazy Loading এর মাধ্যমে লোড হবে। CLI ব্যবহার করে মডিউল তৈরি করতে পারেন:
ng generate module feature --route feature --module app-routing
এটি একটি feature মডিউল তৈরি করবে এবং সেই মডিউলটি app-routing.module.ts-এ রাউটিং কনফিগারেশনে যুক্ত হবে।
Lazy loading কাজ করার জন্য আপনার AppRoutingModule এ মডিউলটি loadChildren দিয়ে লোড করতে হবে।
ধরা যাক, আপনার অ্যাপ্লিকেশন দুটি রাউট রয়েছে, একটি হোম পেজ এবং একটি ফিচার পেজ। ফিচার পেজটিকে lazy load করা হবে।
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', component: HomeComponent },
{
path: 'feature',
loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
এখানে, loadChildren প্যারামিটারটি একটি ফাংশন নেয়, যা ডাইনামিকভাবে FeatureModule মডিউলটি লোড করবে। import() সিঙ্ক্রোনাস ভাবে মডিউল লোড করতে সহায়তা করে।
ফিচার মডিউলের নিজস্ব রাউটিং কনফিগারেশন থাকতে হবে যাতে feature পেজের জন্য প্রয়োজনীয় কম্পোনেন্ট লোড করা যায়।
// feature-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FeatureComponent } from './feature/feature.component';
const routes: Routes = [
{ path: '', component: FeatureComponent }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class FeatureRoutingModule { }
এখানে, RouterModule.forChild(routes) ব্যবহার করা হয়েছে, কারণ এটি একটি child route কনফিগারেশন। মূল রাউট মডিউলটি AppRoutingModule এবং FeatureModule এর জন্য পৃথকভাবে রাউটিং কনফিগার করা হয়েছে।
FeatureModule লোড করাএখন আপনার ফিচার মডিউলটি AppRoutingModule তে Lazy Load হতে প্রস্তুত। ফিচার মডিউলটি সাধারণত কম্পোনেন্ট এবং পরিষেবা দিয়ে গঠিত হবে:
// feature.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureRoutingModule } from './feature-routing.module';
import { FeatureComponent } from './feature/feature.component';
@NgModule({
declarations: [FeatureComponent],
imports: [
CommonModule,
FeatureRoutingModule
]
})
export class FeatureModule { }
এখানে, FeatureRoutingModule এ feature-routing.module.ts এর রাউটিং কনফিগারেশন ইনক্লুড করা হয়েছে, এবং FeatureComponent কম্পোনেন্ট যুক্ত করা হয়েছে।
Lazy loading, Angular অ্যাপ্লিকেশনের পারফরম্যান্স এবং স্কেলেবিলিটি বাড়াতে অত্যন্ত কার্যকর একটি কৌশল।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
